import { HOUR_XAXIS, HALF_XAXIS_LIST } from "@/constants/dispatchCenter";
export const jianQi = {
  name: "尖期",
  type: "bar",
  barWidth: "100%",
  barGap: "0",
  stack: "Total",
  label: {
    show: false,
    position: "top",
    color: "#eee",
  },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "rgba(236 ,127 ,140,1)",
        },
        {
          offset: 0.01,
          color: "rgba(236 ,127 ,140,1)",
        },
        {
          offset: 0.02,
          color: "rgba(236, 127, 140, 0.4)",
        },
        {
          offset: 1,
          color: "rgba(236, 127, 140, 0.4)",
        },
      ],
      global: false,
    },
  },
  data: [],
}

export const fengQi = {
  name: "峰期",
  type: "bar",
  barWidth: "100%",
  stack: "Total",
  label: {
    show: false,
    position: "top",
    color: "#eee",
  },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "rgb(245 ,154 ,35,1)",
        },
        {
          offset: 0.01,
          color: "rgb(245 ,154 ,35,1)",
        },
        {
          offset: 0.02,
          color: "rgba(245, 154, 35, 0.4)",
        },
        {
          offset: 1,
          color: "rgba(245, 154, 35, 0.4)",
        },
      ],
      global: false,
    },
  },
  data: [],
}

export const pingQi = {
  name: "平期",
  type: "bar",
  barWidth: "100%",
  stack: "Total",
  label: {
    show: false,
    position: "top",
    color: "#eee",
  },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "rgba(255, 255, 128,1)",
        },
        {
          offset: 0.01,
          color: "rgba(255, 255, 128,1)",
        },
        {
          offset: 0.02,
          color: "rgba(255, 255, 128, 0.4)",
        },
        {
          offset: 1,
          color: "rgba(255, 255, 128, 0.4)",
        },
      ],
      global: false,
    },
  },
  data: [],
}

export const guQi = {
  name: "谷期",
  type: "bar",
  barWidth: "100%",
  stack: "Total",
  label: {
    show: false,
    position: "top",
    color: "#eee",
  },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "rgba(150, 242, 3,1)",
        },
        {
          offset: 0.01,
          color: "rgba(150, 242, 3,1)",
        },
        {
          offset: 0.02,
          color: "rgba(150, 242, 3, 0.4)",
        },
        {
          offset: 1,
          color: "rgba(150, 242, 3, 0.4)",
        },
      ],
      global: false,
    },
  },
  data: [],
}

export const shenGuQi = {
  name: "深谷期",
  type: "bar",
  barWidth: "100%",
  stack: "Total",
  label: {
    show: false,
    position: "top",
    color: "#eee",
  },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "rgba(129, 211, 248,1)",
        },
        {
          offset: 0.01,
          color: "rgba(129, 211, 248,1)",
        },
        {
          offset: 0.02,
          color: "rgba(129, 211, 248, 0.4)",
        },
        {
          offset: 1,
          color: "rgba(129, 211, 248, 0.4)",
        },
      ],
      global: false,
    },
  },
  data: [],
}

export const chartOption = {
  title: {
    text: "电价时段图",
    textStyle: {
      fontSize: 14,
      fontWeight: "normal",
      color: "#999",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params) {
      let tar = params.find(item => item.value !== '-')
      return tar && tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
    },
  },
  legend: {
    data: [
      { name: "尖期", itemStyle: { color: "#ec7f8c" } },
      { name: "峰期", itemStyle: { color: "#f59a23" } },
      { name: "平期", itemStyle: { color: "#ffff80" } },
      { name: "谷期", itemStyle: { color: "#96f203" } },
      { name: "深谷期", itemStyle: { color: "#81d3f8" } },
    ],
    textStyle: {
      fontSize: 12,
      color: "#999",
      fontWeight: "normal",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: HOUR_XAXIS,
    boundaryGap: true,
    axisLabel: {
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "#999",
        opacity: 0.2,
      },
    },
  },
  series: [],
};


export const chartHalfHourOption = {
  title: {
    text: "电价时段图",
    textStyle: {
      fontSize: 14,
      fontWeight: "normal",
      color: "#999",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params) {
      let tar = params.find(item => item.value !== '-')
      const nextDate = HALF_XAXIS_LIST[HALF_XAXIS_LIST.findIndex(item => item === tar.name) + 1]
      const date = tar.name + '-' + (nextDate ? nextDate : '00:00')
      return date + "<br/>" + tar.seriesName + " : " + tar.value;
    },
  },
  legend: {
    data: [
      { name: "尖期", itemStyle: { color: "#ec7f8c" } },
      { name: "峰期", itemStyle: { color: "#f59a23" } },
      { name: "平期", itemStyle: { color: "#ffff80" } },
      { name: "谷期", itemStyle: { color: "#96f203" } },
      { name: "深谷期", itemStyle: { color: "#81d3f8" } },
    ],
    textStyle: {
      fontSize: 12,
      color: "#999",
      fontWeight: "normal",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: HALF_XAXIS_LIST,
    // axisTick: {
    //   alignWithLabel: true
    // }
    // boundaryGap: true,
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "#999",
        opacity: 0.2,
      },
    },
  },
  series: [],
};